<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>beautifulSwitch</title>
    <style>
        .cb-container {
            display: flex;
            justify-content: center;
            margin-top: 60px;
        }

        html, body {
            padding: 0;
            margin: 0;
            background-color: #fff;
            color: #dcdcdc;
            font-family: 'Open Sans';
        }

        #checkbox {
            display: none;
        }

        .cb-label {
            height: 100px;
            width: 100px;
            background: #f9f9f9;
            border: 10px solid #cfcece;
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            transition: border-color ease 0.2s;
            -moz-transition: border-color ease 0.2s;
            -o-transition: border-color ease 0.2s;
            -webkit-transition: border-color ease 0.2s;
            cursor: pointer;
        }

        .cb-label::before, .cb-label::after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            height: 0;
            width: 20px;
            background: #fff;
            display: inline-block;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -o-transform-origin: left top;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            content: '';
            -webkit-transition: opacity ease 0.5s;
            -moz-transition: opacity ease 0.5s;
            transition: opacity ease 0.5s;
        }

        .cb-label::before {
            top: 76px;
            left: 31px;
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }

        .cb-label::after {
            top: 45px;
            left: 0px;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        input[type=checkbox]:checked + .cb-label,
        .cb-label.checked {
            background: #658db5;
            border-color: #658db5;
        }

        input[type=checkbox]:checked + .cb-label::after,
        .cb-label.checked::after {
            border-color: #fff;
            height: 35px;
            -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
            -o-animation: dothabottomcheck 0.2s ease 0s forwards;
            -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
            animation: dothabottomcheck 0.2s ease 0s forwards;
        }

        input[type=checkbox]:checked + .cb-label::before,
        .cb-label.checked::before {
            border-color: #fff;
            height: 100px;
            -moz-animation: dothatopcheck 0.4s ease 0s forwards;
            -o-animation: dothatopcheck 0.4s ease 0s forwards;
            -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
            animation: dothatopcheck 0.4s ease 0s forwards;
        }

        @-moz-keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 35px;
            }
        }

        @-webkit-keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 35px;
            }
        }

        @keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 35px;
            }
        }

        @keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 70px;
            }
        }

        @-webkit-keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 70px;
            }
        }

        @-moz-keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 70px;
            }
        }

        /*# sourceMappingURL=main.css.map */
    </style>
</head>
<body>

<div class="cb-container">
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="cb-label"></label>
</div>


</body>
</html>